<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/repairDetails.css" />
</head>

<body>
	<div id="mescroll" class="mescroll">
		<div id="app" class="content">
			<!-- 			<div class="title">门锁修理</div> -->
			<!-- 报事内容详情 -->
			<div class="repair-details">
				<div class="desc" v-text="details.repDetails"></div>
				<div class="image-list" v-if="details.repairsImgList.length>0">
					<div class="img" 
						v-for="(item,index) in details.repairsImgList" 
						@click="lookImgTap(details.repairsImgList,index)">
						<img :src="item.filesPath">
					</div>
				</div>
				<div class="record-list" v-if="details.repairsVoiceList.length>0">
					<div class="item" v-for="(item,index) in details.repairsVoiceList" @click="playAudio(item.filesPath)">
						<img src="../../../images/home/repairs/bofang.png">
						<span>语音 - {{index+1}}</span>
					</div>
				</div>
			</div>
			<!-- 用户资料 -->
			<div class="user-data">
				<div class="item">
					<span class="font-c-7f">住址</span>
					<span v-text="details.repDoorNumber"></span>
				</div>
				<div class="item">
					<span class="font-c-7f">联系人</span>
					<span v-text="details.repContactPerson"></span>
				</div>
				<div class="item">
					<span class="font-c-7f">联系电话</span>
					<span v-text="details.repPhoneNumber"></span>
				</div>
			</div>
			<!-- 完成进度 -->
			<div class="progress">
				<div class="title">维修处理进度</div>
				<div class="list">
					<div class="item" v-for="item in details.repairsLogList">
						<div class="item-sate">
							<span class="icon"></span>
							<span class="font-12 font-c-7f" v-text="item.replCD"></span>
						</div>
						<div class="item-desc font-c-41" v-text="item.replDetails"></div>
					</div>

				</div>
			</div>

			<div class="mrk-record" v-if="record">
				<div class="record">
					<img class="record-img" src="../../../images/home/repairs/luyin-f.png" />
					<span class="record-span">播放中...</span>
				</div>
			</div>
		</div>
	</div>
	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		var ws
		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			ws = plus.webview.currentWebview();
			GetRepDetails(ws.repID)
		})
		var app = new Vue({
			el: "#app",
			data: {
				record: false,
				details: {},
				filename: ''
			},
			methods: {
				playAudio: function (text) {
					if (!text) {
						mui.toast('无效的音频文件');
						return;
					}
					var that = this;
					if (mui.os.ios) {
						if (that.filename == '') {
							var dtask = plus.downloader.createDownload(text, {}, function (d, status) {
								// 下载完成
								if (status == 200) {
									console.log(d.filename)
									that.filename = d.filename
									startPlay(that.filename)
								} else {
									mui.alert("Download failed: " + status);
								}
							});
							dtask.start(that.filename);
						} else {
							startPlay(that.filename)
						}
					} else {
						startPlay(text);
					}
				},
				lookImgTap:function (lists,index) {
					var list = []
					lists.forEach(function(item,num){
						list.push(item.filesPath)
					})
					plus.nativeUI.previewImage(list, {
						current: index
					})
				}
			},
		})

		var mescroll = new MeScroll("mescroll", {
			down: {
				auto: false,
				callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
			},
		})

		function downCallback() {
			mui.toast('刷新成功')
			GetRepDetails(ws.repID)
		}

		function GetRepDetails(repID) {
			mui.post(Util.HTTP + 'api/Repairs/GetRepDetails', {
				repID: repID
			}, function (res) {
				if (res.code == 1001) {
					mescroll.endSuccess(); //无参
					app.details = res.data
				} else {
					mui.toast(res.message)
					mescroll.endErr();
				}
			})
		}



		function startPlay(url) {
			var p = null
			app.record = true;
			p = plus.audio.createPlayer(url);
			p.play(function () {
				app.record = false
				mui.toast('播放完成！');
				// 播放完成
			}, function (e) {
				app.record = false
				mui.alert('失败：' + e.message);
			});
		}
	</script>
</body>

</html>
